<template>
    <div>
        <div class="guess">
            <div class="guesstitle">
                <div class="refresh">
                    <span>热门电台榜</span>
                </div>
            </div>
            <div class="guesscontent">
                <ul class="module">
                    <li 
                    v-for="(item,index) in hotdjlist" 
                    :key="index">
                        <van-image :src="item.picUrl" radius="0.5rem" width="6rem" />
                        <div class="modulename">
                            <div>{{ item.name }}</div>
                            <div>{{ item.dj.signature }}</div>
                        </div>
                    </li>
                </ul>
                
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data(){
        return{
            hotdjlist:[] //播客个性化
        };
    },
    created(){
        this.getdjData();
    },
    methods:{
        getdjData(){
            this.$request("get","/dj/toplist?type=hot&limit=4").then((res) => {
                console.log(res);
                this.hotdjlist = res.toplist;
                
            });
        },
    },
    
};
</script>
<style scoped>
/* 猜你喜欢 */
.guess{
    margin: 1rem;
}
.guesstitle{
    display: flex;
    align-items: center;
}
.refresh{
    text-align: left;
    font-weight: bold;
    font-size: 20px;
}
.guesscontent{
    width: 100%;
    overflow: hidden;
}
.module li{
    display: flex;
    margin: 0.5rem;
    width: 6;
    text-align: left;
    vertical-align: top;
}
.modulename :nth-of-type(2){
    top: 0.2rem;
    right: 0.3rem;
    font-size: 14px;
    color: dimgray;
}
</style>